<template>
  <div
    class="comment"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form label-width="180px">
      <el-form-item label="开启评论">
        <el-switch v-model="details.enabled" @change="handleEnabled">
        </el-switch>
      </el-form-item>
      <el-form-item label="评论审核">
        <el-switch
          v-model="details.verifyEnabled"
          @change="handleVerifyEnabled"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="是否显示在首页">
        <el-switch
          v-model="details.showHomePageEnabled"
          @change="handleShowHomePageEnabled"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="显示在选手详情页">
        <el-switch
          @change="handleShowContestantPageEnabled"
          v-model="details.showContestantPageEnabled"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="最多可以评论">
        <div style="display: flex">
          <el-input
            class="numrule"
            type="number"
            style="width: 90px"
            v-model.number="details.wechatAccountInEveryDayLimitTimes"
            @change="handleWechatAccountInEveryDayLimitTimes"
          ></el-input>
          <span>次</span>
        </div>
      </el-form-item>
      <el-form-item label="首页显示评论" v-if="details.showHomePageEnabled">
        <div style="display: flex">
          <el-input
            type="number"
            class="numrule"
            style="width: 90px"
            v-model.number="details.showHomePageCount"
            @change="handleShowHomePageCount"
          ></el-input>
          <span>条</span>
        </div>
        <div class="gotComent" @click="handleGoTo">评论管理<i style="margin-left:8px;" class="el-icon-right"></i></div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      details: {},
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  created() {
    this.getCommentary();
  },
  methods: {
    getCommentary() {
      this.$api("vote.getCommentary", {
        voteId: this.$route.query.id,
      }).then((res) => {
        this.details = res;
      });
    },
    handleGoTo(){
      this.$router.push({
        path:'/manage/comment',
        query:{
          id:this.$route.query.id
        }
      })
    },
    saveApi() {
      this.$api("vote.saveCommentary", {
        ...this.details,
        wechatAccountInEveryDayLimitTimes: this.details
          .wechatAccountInEveryDayLimitTimes
          ? Number(this.details.wechatAccountInEveryDayLimitTimes)
          : 0,
        showHomePageCount: this.details.showHomePageCount
          ? Number(this.details.showHomePageCount)
          : 0,
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleEnabled() {
      this.saveApi();
    },
    handleVerifyEnabled() {
      this.saveApi();
    },
    handleShowHomePageEnabled() {
      this.saveApi();
    },
    handleShowContestantPageEnabled() {
      this.saveApi();
    },
    handleWechatAccountInEveryDayLimitTimes() {
      if (this.details.wechatAccountInEveryDayLimitTimes < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
    handleShowHomePageCount() {
      if (this.details.showHomePageCount < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  width: 820px;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 20px;
  }

  ::v-deep.el-input__inner {
    height: 30px;
    border-radius: 30px;
    width: 75px;
  }
  .gotComent {
    width: 120px;
    border-radius: 24px;
    margin-top: 10px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: $themeColor;
    border: 1px solid #dcdfe6;
     cursor: pointer;
  }
}
</style>
